import React, { Component } from 'react';
import PropTypes from 'prop-types';

class SubCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value
    }
  }
  static propTypes = {
    value: PropTypes.number,
  }
  static defaultProps = {
    value: 0,
  }
  addValue() {
    const { value } = this.state;
    this.setState({
      value: value + 1
    }, this.props.changeTotal(1))

  }
  delValue() {
    const { value } = this.state;
    this.setState({
      value: value - 1
    }, this.props.changeTotal(-1))

  }
  componentWillMount() {
    console.log('willMount' + this.props.name)
  }
  componentDidMount() {
    console.log('DidMount' + this.props.name)
  }
  componentWillReceiveProps(nextPros) {
    console.log('receive' + this.props.name)
  }
  componentWillUnmount() {
    console.log('over' + this.props.name)
  }
  render() {
    const { value } = this.state;
    return (
      <div>
        <span>{value}</span>
        <button onClick={this.delValue.bind(this)}>-- 1</button>
        <button onClick={this.addValue.bind(this)}>++ 1</button>
      </div>
    )
  }
}

export default SubCom;